<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>URL Analyzer</title>
<script type="text/javascript" src="tinybox.js"></script>
<link rel="stylesheet" href="style2.css" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;  width:98%; height:98%;}
.greenBorder {border: 0px solid green;  text-align:center;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<script type="text/javascript">
function handleEnter(inField, e) {
    var charCode;
    
    if(e && e.which){
        charCode = e.which;
    }else if(window.event){
        e = window.event;
        charCode = e.keyCode;
    }

    if(charCode == 13) {
	showResults();
    }
}

function showResults()
{
        TINY.box.show({iframe:'http://127.0.0.1:8080/Agree?address=' + document.getElementById('URL').value, boxid:'frameless',width:600,height:500,fixed:false,maskid:'bluemask',		maskopacity:40,closejs:function(){closeJS()}})
}

function showSetup()
{
        TINY.box.show({iframe:'http://127.0.0.1:3000/', boxid:'frameless',width:400,height:348,fixed:false,maskid:'bluemask',		maskopacity:40,closejs:function(){closeJS()}})
}

function showAbout()
{
        TINY.box.show({iframe:'http://127.0.0.1:8080/about.html', boxid:'frameless',width:400,height:348,fixed:false,maskid:'bluemask',		maskopacity:40,closejs:function(){closeJS()}})
}

</script>
<link href="MenuStyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="page-background"><img src="bg.jpg" width="100%" height="100%" alt="Smile">
  </div>
  <div id="content">
	 <img src="images/title.png">
    <div class="greenBorder" style="display: table; height:100%; width:100%; #position: relative; overflow: hidden;">
      <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
        <div class="greenBorder" style=" #position: relative; #top: -50%;">
	
          <div class="inner_copy"></div>							
    	      <div id="search">
	        <span style="color:#ffffff;"><i>Enter the URL:</i></span> <input type="text" id="URL" onkeypress="handleEnter(this, event)" /><br />

          </div>
        </div>
      </div>
    </div>
<!--bottom dock -->
<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="http://127.0.0.1:8080"><span>Home</span><img src="images/home.png" alt="Home" /></a> 
  <a class="dock-item2" onclick="showResults()" ><span>Analysis Results</span><img src="images/chart.png" alt="Chart" /></a> 
  <a class="dock-item2" onclick="showSetup()"><span>Setup</span><img src="images/setup.png" alt="Setup" /></a> 
  <a class="dock-item2" onclick="showAbout()"><span>About</span><img src="images/about.png" alt="About" /></a> 
  </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock2').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 40,
					proximity: 90,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>
  </div>


</body>
</html>

